<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><%-- ${fn:length(list)} --%>

<!--jQuery -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//화면 좌측에 있는 지역을 클릭하였을 시 정보를 로딩하는 ajax
		$(".tImage").click( function(){	        
	           var id = $(this).attr("id");      
	           $.ajax({
	        	   type:"POST",
	        	   url:"theater.do",
	        	   data:"command=loadTheaterList&loc="+id,
	        	   dataType:"json",
	        	   success:function(jsonData){
	        		   var tList=jsonData.tList;
	        		  //화면 최상단 지역명 로딩
	        		   $("#loc_info").html("<font size='4' color='FF4500'><b>"+tList[0].localInfoVO.loc+" 지역</b></font>");
	        		  //지역에 속해있는 영화관은 테이블 형식으로 로딩
	        		   $("#theater_list").html(loadTeaterList(tList));
	        		  //기본 디폴트 화면에 보여줄 지역 지도를 테이블 형식으로 로딩
	        		   $("#theater_info").html("<table><tr><td>"
	        		   +"<img id="+tList[0].localInfoVO.loc+" src='img.loc/"+tList[0].localInfoVO.loc+".jpg'></td></tr></table>");
	        	   },
	        	   error:function(){
	        		   alert("에러");
	        	   }
	           });
	        });
		
		$("#theater_list").on("click","#tNameList td",function(){
			var tName = $(this).text();
			var tNo=$(":input:hidden:[name='"+tName+"']").val();
       	 		$.ajax({
	        	   type:"POST",
	        	   url:"theater.do",
	        	   data:"command=loadTheaterInfo&tNo="+tNo,
	        	   dataType:"json",
	        	   success:function(jsonData){
	        		   var pList=jsonData.pList;
	        		   $("#theater_info").html(loadTeaterInfo(pList));
	        	   },
	        	   error:function(){
	        		   alert("에러");
	        	   }
	           });
		});
		
		//////////////////////////지역 지도 클릭시 영화관 정보 이미지 좌표 사용////////////////////////// 
		var chargeX, chargeY;
		$("#서울2").click(function(e){ //서울지역 지도 클릭
			var tNo=-1;
			chargeX = e.clientX;
			chargeY = e.clientY;
			if(chargeX>1000&&1030>chargeX){//강남
				if(chargeY>345&&375>chargeY){
					tNo=2;
					alert("강남");
				}
			}
			else if(chargeX>1060&&1095>chargeX){//코엑스
				if(chargeY>395&&420>chargeY){
					tNo=1;
					alert("코엑스");
				}
			}else{
				return false;
			}
			$.ajax({
	        	   type:"POST",
	        	   url:"theater.do",
	        	   data:"command=loadTheaterInfo&tNo="+tNo,
	        	   dataType:"json",
	        	   success:function(jsonData){
	        		   var pList=jsonData.pList;
	        		   $("#theater_info").html(loadTeaterInfo(pList));
	        	   },
	        	   error:function(){
	        		   alert("에러");
	        	   }
	           });
		});
		$("#theater_info").on("click","#서울",function(e) { //서울지역 지도 클릭
			var tNo=-1;
			chargeX = e.clientX;
			chargeY = e.clientY;	
			if(chargeX>1000&&1030>chargeX){//강남
				if(chargeY>345&&375>chargeY){
					tNo=2;
					alert("강남");
				}
			}
			else if(chargeX>1060&&1095>chargeX){//코엑스
				if(chargeY>395&&420>chargeY){
					tNo=1;
					alert("코엑스");
				}
			}
			else{
				return false;
			}
			$.ajax({
	        	   type:"POST",
	        	   url:"theater.do",
	        	   data:"command=loadTheaterInfo&tNo="+tNo,
	        	   dataType:"json",
	        	   success:function(jsonData){
	        		   var pList=jsonData.pList;
	        		   $("#theater_info").html(loadTeaterInfo(pList));
	        	   },
	        	   error:function(){
	        		   alert("에러");
	        	   }
	           });
		});
		$("#서울2").mousemove(function(e){  //서울지역 마우스 이동
			chargeX = e.clientX;
			chargeY = e.clientY;
			$("#locnum").html(chargeX);
			$("#locnum2").html(chargeY);
			if(chargeX>1000&&1030>chargeX){//강남
				if(chargeY>345&&375>chargeY){
					$(this).css("cursor","pointer");
				}
			}
			else if(chargeX>1060&&1095>chargeX){//코엑스
				if(chargeY>395&&420>chargeY){
					$(this).css("cursor","pointer");
				}
			}
			else{
				$(this).css("cursor","default");
			}
		});
		$("#theater_info").on("mousemove","#서울",function(e){//서울지역 마우스 이동
			chargeX = e.clientX;
			chargeY = e.clientY;
			$("#locnum").html(chargeX);
			$("#locnum2").html(chargeY);
			if(chargeX>1000&&1030>chargeX){//강남
				if(chargeY>345&&375>chargeY){
					$(this).css("cursor","pointer");
				}
			}
			else if(chargeX>1060&&1095>chargeX){//코엑스
				if(chargeY>395&&420>chargeY){
					$(this).css("cursor","pointer");
				}
			}
			else{
				$(this).css("cursor","default");
			}
		});

		$("#theater_info").on("click","#경기",function(e) { //경기지역 지도 클릭
			var tNo=-1;
			chargeX = e.clientX;
			chargeY = e.clientY;	
			if(chargeX>965&&995>chargeX){//수원
				if(chargeY>365&&390>chargeY){
					tNo=3;
					alert("수원");
				}
			}
			else if(chargeX>905&&935>chargeX){//안산
				if(chargeY>360&&390>chargeY){
					tNo=7;
					alert("안산");
				}
			}
			else{
				return false;
			}
			$.ajax({
	        	   type:"POST",
	        	   url:"theater.do",
	        	   data:"command=loadTheaterInfo&tNo="+tNo,
	        	   dataType:"json",
	        	   success:function(jsonData){
	        		   var pList=jsonData.pList;
	        		   $("#theater_info").html(loadTeaterInfo(pList));
	        	   },
	        	   error:function(){
	        		   alert("에러");
	        	   }
	           });
		});
		$("#theater_info").on("mousemove","#경기",function(e){//경기지역 마우스 이동
			chargeX = e.clientX;
			chargeY = e.clientY;
			$("#locnum").html(chargeX);
			$("#locnum2").html(chargeY);
			if(chargeX>965&&995>chargeX){//수원
				if(chargeY>365&&390>chargeY){
					$(this).css("cursor","pointer");
				}
			}
			else if(chargeX>905&&935>chargeX){//안산
				if(chargeY>360&&390>chargeY){
					$(this).css("cursor","pointer");
				}
			}
			else{
				$(this).css("cursor","default");
			}
		});
		$("#theater_info").on("click","#강원",function(e) { //강원지역 지도 클릭
			var tNo=-1;
			chargeX = e.clientX;
			chargeY = e.clientY;	
			if(chargeX>890&&920>chargeX){//원주
				if(chargeY>410&&440>chargeY){
					tNo=6;
					alert("원주");
				}
			}
			else{
				return false;
			}
			$.ajax({
	        	   type:"POST",
	        	   url:"theater.do",
	        	   data:"command=loadTheaterInfo&tNo="+tNo,
	        	   dataType:"json",
	        	   success:function(jsonData){
	        		   var pList=jsonData.pList;
	        		   $("#theater_info").html(loadTeaterInfo(pList));
	        	   },
	        	   error:function(){
	        		   alert("에러");
	        	   }
	           });
		});
		$("#theater_info").on("mousemove","#강원",function(e){//강원지역 마우스 이동
			chargeX = e.clientX;
			chargeY = e.clientY;
			$("#locnum").html(chargeX);
			$("#locnum2").html(chargeY);
			if(chargeX>890&&920>chargeX){//원주
				if(chargeY>410&&440>chargeY){
					$(this).css("cursor","pointer");
				}
			}
			else{
				$(this).css("cursor","default");
			}
		});
		//////////////////////////지역 지도 클릭시 영화관 정보 찾아가기 여기까지////////////////////////// 
	});
	
	
	//theater Main 에 해당하는 영화관 리스트를 보여주기 위해 loc_theater.jsp 에 영화관 리스트를 테이블로 생성
	function loadTeaterList(tList){
		var table="<table><tbody id='tNameList'>";
		table+="<tr>";
		for(i=0;i<tList.length;i++){
			var name=tList[i].theater;
			table+="<td width='70' align='center'  style='cursor: pointer;'><input type='hidden' name='"+name+"' value="+tList[i].theater_no+"><b>"+name+"</b></td>";
		}
		table+="</tr></tbody></table><hr>";							
		return table;
	}
	
	//theater Main 에 해당하는 영화관의 상영관 정보를 보여줌
	function loadTeaterInfo(pList){
		var table="<table border='1'><tbody id='theater_PlayRoomInfo'>"
		+"<tr><td align='center' colspan='2'><img src='img.loc/"+pList[0].theaterVO.theater_no+"_theater.jpg'></td></tr><tr>"
		+"<td align='center' width='50%'>"+pList[0].theaterVO.theater+"</td>"
		+"<td align='center' width='50%'>상영관 수 : "+pList.length+"</td></tr>"
		+"<tr><td align='center' width='50%'>주소 : "+pList[0].theaterVO.theater_addr+"</td>"
		+"<td align='center' width='50%'>전화번호 : "+pList[0].theaterVO.theater_tel+"</td>"
		+"</tr></tbody></table>";							
		return table;
	}
	
</script>
<br><br>
<img width="90" src="img/left_theater1_menu1.jpg" class="tImage" id="1" border="0" onMouseOver='this.src="img/left_theater1_menu1_over.jpg"' onMOuseOut='this.src="img/left_theater1_menu1.jpg"'>
<br><br>
<img width="90" src="img/left_theater1_menu2.jpg" class="tImage" id="2" border="0" onMouseOver='this.src="img/left_theater1_menu2_over.jpg"' onMOuseOut='this.src="img/left_theater1_menu2.jpg"'>
<br><br>
<img width="90" src="img/left_theater1_menu3.jpg" class="tImage" id="3" border="0" onMouseOver='this.src="img/left_theater1_menu3_over.jpg"' onMOuseOut='this.src="img/left_theater1_menu3.jpg"'>
